<template>
	<view>
		<view class="text-center">
			<image 
			class="cu-avatar xl round margin-top" 
			:src="uinfo&&uinfo.avatar?uinfo.avatar:'/src/static/logo.png'" mode=""></image>
			<view class="margin text-xl">
				<button class="cu-btn line-orange" @click="handleAvatar">
					点击修改头像
				</button>
			</view>
		</view>
		<view class="padding-lr margin-lr">
			<view class="margin-tb">
				真实姓名
			</view>
		    <custom-input v-model="name" holder="请输入真实姓名">
				<text class="iconfont icon-wode"></text>
			</custom-input>
		</view>
		<view class="padding-lr margin-lr">
			<view class="margin-tb">
				手机号码
			</view>
			<custom-input v-model="phone" holder="请输入手机号">
				<text class="iconfont icon-dianhua"></text>
			</custom-input>
		</view>
		<view class="padding margin-lr">
			<view  class="cu-progress striped radius line-orange">
				<view  
				 v-if="isProgress" 
				 class="bg-orange"
				 :style="{'width':progressValue+'%'}">
					{{progressValue}}%
				</view>
				<text 
				v-else class="text-center" 
				@click="handleProgress">
					点击上传简历
				</text>
			</view>
		</view>
		<view class="flex justify-around padding margin-top">
			<button class="cu-btn bg-grey block " @click="">
				取消
			</button>
			<button class="cu-btn bg-orange block " @click="handleUpdate">
				确认
			</button>
		</view>
	</view>
</template>

<script setup lang="ts">
import {computed,ref,type Ref} from 'vue';
import {useStore} from 'vuex'
import {userUpdate} from '../../api/user'
import {pathToBase64} from 'image-tools'
import CloudSDK from 'leancloud-storage'
const name:Ref<string>=ref('anan')
const phone:Ref<string>=ref('18116777714')
const avatar:Ref<string>=ref('')
const store=useStore()
const uinfo=computed(()=>store.state.user.uinfo)
const handleUpdate=async ()=>{
	let {objectId,sessionToken}=uinfo.value
	let res =await userUpdate(objectId,sessionToken,{
	  "name":name.value,
	  "phone":phone.value,
	  "avatar":avatar.value 
})
 console.log('更新成功',res);
}
//头像上传
const  handleAvatar= ()=>{
	//选择头像
	uni.chooseImage({
		count:1,
		success :async (file)=>{
			console.log('头像',file);
			let temp=file.tempFilePaths[0]//2. 临时资源路径
			let base64=await pathToBase64(temp)//3. 编码操作
			console.log('base64编码后',base64);
			let data={"base64":base64}
			let res:any=await new CloudSDK.File('avatar.png',data) //4. 构建云资源对象
			.save()//5.请求上传
			console.log('云端图像链接',res);
			let {url}=res.attributes//6.永久可访问在线图片链接
			store.commit('user/loginSuccess',{//7.更新状态机，本地存储
				...uinfo.value,
				avatar:url,
				})
			avatar.value=url//8.准备向数据库提交数据
		}
	})
}
//简历上传
const isProgress:Ref<boolean>=ref(false)
const progressValue:Ref<number>=ref(1)
const handleProgress=()=>{
	uni.chooseFile({
		count:1,
		success :async (file)=>{
			console.log('简历',file);
			let temp=file.tempFilePaths[0]
			isProgress.value=true//显示进度条
			progressValue.value=10
			let base64=await pathToBase64(temp)
			console.log('base64编码后',base64);
			let data={"base64":base64}
			progressValue.value=20
			let res:any=await new CloudSDK.File('xxx.pdf',data)
			.save()//5.请求上传
			progressValue.value=100
		}
	})
}
</script>

<style lang="scss">
page{
	background-color: #fff;
}
.cu-progress{
	height: 150upx;
	text{
		display: block;
		width: 100%;
	}
}   
</style>
